<template>
    <div>
        <van-search v-model="value" show-action  placeholder="请输入搜索关键词" @search="onSearch" shape="round" @click-input="clickInputFn">
            <template #left>
                <div @click="onClickAdress" class="addressText">地址</div>
            </template>
            <template #action>
                <div @click="onClickButton" class="searchText" v-if="show">登录</div>
                <div @click="onClickButton2" class="searchText" v-else>我的</div>
            </template>
        </van-search>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, defineProps, defineEmits } from 'vue'
import { Toast, type ToastOptions } from 'vant';
import {useRouter,useRoute} from 'vue-router'
import { useUserStore } from '@/store/useUserStore'
const UserStore = useUserStore()
let value = ref()
const router = useRouter()
const route = useRoute()
let onSearch = (val: string | ToastOptions | undefined) => {
    Toast(val);
}
let onClickButton = () => {
    Toast(value.value);
    router.push('/login')
}
console.log('token111',UserStore.token);

// 定义一个用于判断右侧显示的是登录还是我的
let show = localStorage.getItem('token')?false:true
// let show = UserStore.token?true:false
let onClickButton2=()=>{
    router.push('/mine')
}
let onClickAdress=()=>{
    router.push('/:pathMatch(.*)*')
}
// 点击搜索的输入框跳转到搜索页面
let clickInputFn = ()=>{
    router.push('/search')
}
</script>
<style scoped lang="scss">
.van-search{
    background: #D30707;
    display: flex;
    justify-content: space-around;
    .addressText{
        color: #fff;
        margin-right: 8px;
    }
    .searchText{
        color: #fff;
        font-size: 14px;
        
    }
    
}
</style>